//导航样式
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .navWrap{
    .flexTwo;
    height: 60px;
    background-color: @f;
    border-bottom: 1px solid @bc;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    .navLeft{
      display: flex;
      align-items: center;
      padding-left: 20px;
      .logo{
        background: url("../../fly/images/logo.png");
        text-indent: -99999px;
        position: relative;
        top:inherit;
        left: inherit;
      }
      .searchWrap{
        display: flex;
        margin-left: 30px;
        align-items: center;
        i{
          font-size: 18px;
          color: @minorTxt;
        }
        input{
          border: none;
          padding: 0 8px;
          outline: none;
          height: 30px;
        }
        .doSearch{
          .button(@theme,@f,@theme,3px);
          padding: 3px 10px;
          .filter;
          display: none;
          &:hover{
            background-color: transparent;
            border-style: dashed;
            color: @theme;
          }
        }
      }
      .focusInput{
        border-bottom: 1px solid @theme;
        i{
          color: @theme;
        }
        .doSearch{
          display: block;
        }
      }
    }

    .navCenter{
      display: flex;
      justify-content: center;
      .aWrap{
        height: 60px;
        display: flex;
        align-items: center;
      }
      a{
        color: @theme;
        font-size: 16px;
        text-shadow: 0 0 5px rgba(0,0,0,.1) ;
      }
      i{
        margin: 3px 0 0 5px;
        color: @theme;
      }
    }

    .navRight{
      display: flex;
      justify-content: flex-end;
      .more{
        height: 60px;
        display: flex;
        align-items: center;
        &:hover{
          i{
            color: @theme;
          }
        }
        i{
          color: #999;
          font-size: 18px;
          .filter;
        }
      }
      .mine{
        position: relative;
        &:hover .myCard{
          display: block;
        }
        .portrait{
          .circle(30px,30px,5px);
          box-shadow: 0 0 10px rgba(0,0,0,.1);
          border: 1px solid @bc;
          margin-right:10px ;
          img{
            max-width: 100%;
          }
        }
        span{
          color: @mainTxt;
        }
      }
      .message{
        padding: 0 20px;
        position: relative;
      }
      .last{
        border-left: 2px solid #f5f6f8;
        padding:0 20px;
      }
      .login{
        color: @theme;
        font-size: 16px;
      }
      .cut{
        margin: 0 10px;
        color: #ddd;
        font-size: 10px;
      }
      .register{
        margin-right: 20px;
        span{
          text-decoration: line-through;
        }
      }
    }
  }
  .subNav{
    background-color: @f;
    padding: 30px 0 20px;
    display: none;
    border-bottom: 1px solid #f2f2f2;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    .navBox{
      width: 1170px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .up{
        position: absolute;
        .flexCol;
        width: 50px;
        height: 50px;
        background-color: rgba(95,184,120,.3);
        right: -50px;
        top: -30px;
        justify-content: center;
        color: @f;
        cursor: pointer;
      }
      li{
        width: 280px;
        padding: 0 5px;
        margin-bottom: 10px;
        a{
          border: 1px solid #EDEDED;
          padding-left: 40px;
          margin-left: 10px;
          padding-right: 20px;
          margin-right: 10px;
          display: block;
          line-height: 40px;
          position: relative;
          .filter;
          &:hover{
            color: @theme;
            border: 1px solid @theme;
          }
          i{
            padding-right: 10px;
            font-size: 18px;
            color: @theme;
          }
        }
        .c-btn--border-line:after, .c-btn--border-line:before{
          content: '';
          display: block;
          position: absolute;
          box-sizing: border-box;
          border: 1px solid transparent;
          width: 0;
          height: 0;
        }
        .c-btn--border-line:before {
          bottom: 0;
          right: 0;
          -webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
          transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
        }
        .c-btn--border-line:after {
          top: 0;
          left: 0;
          -webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
          transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
        }
        .c-btn--border-line:hover:after, .c-btn--border-line:hover:before {
          width: 100%;
          height: 100%;
        }
        .c-btn--border-line:hover:before {
          border-bottom-color: @theme;
          border-left-color: @theme;
          -webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
          transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
        }
        .c-btn--border-line:hover:after {
          border-top-color: @theme;
          border-right-color: @theme;
          -webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
          transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
        }
      }
    }
  }
}
